<template>
  <v-tr :class="[{'isExpand': data.isExpand}]" >
    <v-td
      v-for="columnName in tableList"
      :key="columnName"
      class="text-overflow"
      :columnStyle="columnName | columnStyle(columnsWidth, columns)"
    >
      <template v-if="columnName === mainColumn">
        <info-render
          :recordIndex="recordIndex"
          :full="data"
          :data="data[columnName]"
          :column="columns[columnName]"
          :minLength="columns[columnName].minLength"
          :width="columnsWidth[columnName]"
        >
          <template slot-scope="props">
            <div
              scope="props"
              :style="levelStyle"
              @click="nodeExpand">
              <i
                v-if="data.children"
                :class="['iconfont', {'icon-right': !data.isExpand, 'icon-down': data.isExpand}]"
              />
              {{ props.content }}
            </div>
          </template>
        </info-render>
      </template>
      <template v-else>
        <info-render
          :recordIndex="recordIndex"
          :full="data"
          :data="data[columnName]"
          :column="columns[columnName]"
          :minLength="columns[columnName].minLength"
          :width="columnsWidth[columnName]"
        >
          <template slot-scope="props">
            {{ props.content }}
          </template>
        </info-render>
      </template>
    </v-td>
    <v-td
      v-if="operationList && operationList.length>0"
      :columnStyle="operationWidth | operationStyle">
      <ButtonList
        v-if="buttonList.length>0"
        :buttonList="buttonList"
      />
      <span v-else>
        -
      </span>
    </v-td>
    <v-tbody
      v-if="data.children && data.isExpand">
      <tree-table-record
        v-for="(data,index) in data.children"
        v-bind="$attrs"
        v-on="$listeners"
        :key="index"
        :level="level + 1"
        :data="data"
        :recordIndex="index | recordIndexConcat(recordIndex)"
        :tableList="tableList"
        :mainColumn="mainColumn"
        :columns="columns"
        :columnsWidth="columnsWidth"
        :operationList="operationList"
        :operationWidth="operationWidth"
        :hoverRecord="hoverRecord"
        @nodeExpand="nodeExpand"
        @changeHoverRecord="changeHoverRecord">
      </tree-table-record>
    </v-tbody>
  </v-tr>
</template>

<script>
import VTbody from '@/components/VTable/VTbody'
import VTr from '@/components/VTable/VTr'
import VTd from '@/components/VTable/VTd'
import InfoRender from '@/components/InfoRender'
import ButtonList from '@/components/ButtonList'

export default {
  name: 'tree-table-record',
  components: {
    VTbody,
    VTr,
    VTd,
    InfoRender,
    ButtonList
  },
  props: {
    recordIndex: Array,
    mainColumn: String,
    operationList: Array,
    operationWidth: Number,
    columns: Object,
    columnsWidth: Object,
    level: {
      type: Number,
      default: 0
    },
    tableList: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    hoverRecord: {
      type: String | Number
    }
  },
  computed: {
    isHover () {
      return this.hoverRecord === this.data.id
    },
    levelStyle () {
      return {
        'margin-left': this.level * 28 + 'px'
      }
    },
    buttonList () {
      return this.operationList.filter(operation => {
        return !operation.isShow || operation.isShow(this.data, operation)
      }).map(operation => {
        return {
          ...operation,
          size: 'xs',
          funcProps: {
            ...operation.funcProps,
            data: this.data
          }
        }
      })
    }
  },
  filters: {
    recordIndexConcat (index, recordIndex) {
      return [...recordIndex, index]
    },
    columnStyle (columnName, columnsWidth, columns) {
      return {
        width: columnsWidth[columnName] + 'px',
        ...columns[columnName].style
      }
    },
    operationStyle (width) {
      return {
        width: width + 'px'
      }
    }
  },
  methods: {
    nodeExpand () {
      this.$emit('changeTreeExpands', {
        recordIndex: this.recordIndex,
        id: this.data.id,
        isExpand: !this.isExpand
      })
    },
    changeHoverRecord () {
      this.$emit('changeHoverRecord', this.data.id)
    }
  }
}
</script>

<style scoped lang="sass">
.iconfont
  line-height: 20px
.fa
  width: 10px
.text-overflow
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden
.text-break
  word-break: break-all
  word-wrap: break-word
  max-width: 300px
</style>
